<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绑定内联样式style</title>
</head>
<body>

<div id="app">
    <div :style="{'color':color,'fontSize':fontSize+ 'px'}">这是一段文本内容</div>
</div>

<div id="app1">
    <div :style="styles">测试data文本</div>
</div>

<div id="app2">
    <div :style="styles">测试computed文本</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    /**
     * 使用v-bind:style可以给元素绑定内联样式，方法与:class类似，也有对象语法和数组语法，看上去很像直接在元素上写CSS。
     *
     * CSS属性名称使用驼峰命名(camelCase)或者短横分割命名（kebab-case）
     *
     * 在使用:style时，Vue.js会自动给特殊的CSS属性名称增加前缀，如transform等。
     * */

    var app = new Vue({
        el:"#app",
        data:{
            color:"red",
            fontSize: 14,
        }
    });

    //大多数情况下，直接写一长串的样式不便于阅读和维护，所以一般写在data或者computed里面
    var app1 = new Vue({
        el:"#app1",
        data:{
            styles:{
                color:'blue',
                fontSize: 14 +'px',
            }
        }
    });

    var app2 = new Vue({
        el:"#app2",
        computed:{
            styles:function () {
                return {
                    color:'green',
                    fontSize: 16+ 'px',
                }
            }
        }
    });


</script>
</body>
</html>